<template>
  <div :id="id"></div>
</template>

<script>
import { Chart } from '@antv/g2';
import axios from 'axios'
export default {
  name: "tree_chart",
  props: {
    id:{
      type:String,
      required: true,
    },
    width: {
      // 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
      // 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
      type: Number,
      // 定义是否必须传
      required: false,
      // 定义默认值
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
  },
  mounted() {
    this.getPlot()
  },
  methods: {
    getPlot(){
      const chart = new Chart({
        container: this.id,
        height: this.height,
        width: this.width,
      });
      // console.log(require('@/assets/data/all_samples.json'))
      chart
          .tree()
          .coordinate({ transform: [{ type: 'polar' }] })
          .data({
            type: 'custom',
            callback: (data) => {
              /* your code */
              return require('@/assets/data/all_samples.json');
            }
          })
          // .layout({
          //   sortBy: (a, b) => a.value - b.value,
          // })
          // .style('nodeFill', (d) => (d.height === 0 ? '#999' : '#000'))
          .style('linkStroke', '#999')
          .style('labelText', (d) => d.data.name || '-')
          // .style('labelFontSize', (d) => (d.height === 0 ? 7 : 12))
          // .style('labelTextAlign', (d) => (d.height === 0 ? 'start' : 'end'))
          // .style('labelPosition', (d) => (d.height !== 0 ? 'left' : 'right'))
          // .style('labelDx', (d) => (d.height === 0 ? 5 : -5))
          .style('labelBackground', true)
          .style('labelBackgroundFill', '#fff');

      chart.render();
    }
  }
}
</script>

<style scoped>

</style>
